import IconDouyin from '@/components/icon/IconDouyin';
import IconToutiao from '@/components/icon/IconToutiao';
import IconWeibo from '@/components/icon/IconWeibo';
import { PageContainer } from '@ant-design/pro-components';
import { Space } from 'antd';
import React, { useState } from 'react';
import RecordExport from '../export/RecordExport';
import RecordExportWeChat from '../export/RecordExportWeChat';
import TabHot from '../hot/TabHot';
import TabOperate from '../operate/TabOperate';
import TabRank from '../rank/TabRank';
import TabRecord from '../record/TabRecord';

interface PageContainerTophubProps {}

const PageContainerTophub: React.FC<PageContainerTophubProps> = ({}) => {
  const hotRankTypes = [
    {
      icon: <IconWeibo width={24} height={24} />,
      name: '微博热搜',
      type: 1,
    },
    {
      icon: <IconDouyin width={24} height={24} />,
      name: '抖音热榜',
      type: 2,
    },
    {
      icon: <IconToutiao width={24} height={24} />,
      name: '头条热搜',
      type: 4,
    },
  ];
  const [pageContainerTab, setPageContainerTab] = useState('record');

  const container = (tab: string) => {
    if (tab === 'record') {
      return <TabRecord hotRankTypes={hotRankTypes} />;
    } else if (tab == 'rank') {
      return <TabRank hotRankTypes={hotRankTypes} />;
    } else if (tab === 'hot') {
      return <TabHot hotRankTypes={hotRankTypes} />;
    } else if (tab == 'operate') {
      return <TabOperate />;
    }
  };

  return (
    <>
      <PageContainer
        header={{
          title: '热搜热榜',
          breadcrumb: {
            items: [],
          },
        }}
        tabList={[
          {
            tab: '上榜情况',
            key: 'record',
          },
          {
            tab: '排名情况',
            key: 'rank',
          },
          {
            tab: '实时热搜',
            key: 'hot',
          },
          {
            tab: '热榜补录',
            key: 'operate',
          },
        ]}
        // tabBarExtraContent={<RecordExport onRefurbish={function (): void {}} />}
        tabBarExtraContent={
          <Space>
            <RecordExport onRefurbish={function (): void {}} />
            <RecordExportWeChat onRefurbish={function (): void {}} />
          </Space>
        }
        tabActiveKey={pageContainerTab}
        onTabChange={(value) => {
          setPageContainerTab(value);
        }}
      >
        {container(pageContainerTab)}
      </PageContainer>
    </>
  );
};

export default PageContainerTophub;
